<!--用户管理-->
<template>
  <div>
    <yxt-table
      :api-url="getzbjg"
      title="用户管理"
      table-title="用户列表"
      :table-column="tableColumn"
      :other-config="otherConfig"
      :dict="dict"
      :setup-config="setupConfig"
      :search-config="searchConfig"
      :search-reset="searchReset"
      @stop="stop"
      @edit="edit"
      @del="handleDelete"
    >
      <!-- 数据列表操作按钮插槽 -->
      <template v-slot:multiple-operation="{selectionData }">
        <el-button
          type="primary"
          size="small"
          @click="handleAdd(selectionData)"
        >新增用户</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleClickExport(searchData)"
        >导出</el-button>
      </template>
    </yxt-table>
    <dia-log :model="modalVisible" :title="title" max-height="80" @close="closeDialog ">
      <template #body>
        <div class="sjtj">基本信息</div>
        <div class="informationContainer">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="11">
                <el-form-item label="登录名字">
                  <el-input v-model="form.value" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="用户名称">
                  <el-input v-model="form.value" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="部门">
                  <el-select v-model="form.value" size="medium" style="width:100%" placeholder="请选择部门">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系方式">
                  <el-input v-model="form.value" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="邮箱地址">
                  <el-input v-model="form.value" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="账号类型">
                  <el-input v-model="form.value" />
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <div class="sjtj">角色权限</div>
        <div class="roleContainer">
          <div style="text-align: center">
            <el-transfer
              v-model="valueList"
              style="text-align: left; display: inline-block"
              filterable
              :left-default-checked="[2, 3]"
              :right-default-checked="[1]"
              :render-content="renderFunc"
              :titles="['角色列表', '已选角色']"
              :button-texts="['到左边', '到右边']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
              }"
              :data="data"
              @change="handleChange"
            />
          </div>
        </div></template>
      <template #footer>
        <el-button type="primary">保存</el-button>
        <el-button @click="modalVisible = false">取消</el-button>
      </template>
    </dia-log>
  </div>
</template>

<script>
import yxtTable from '@/components/Table/index.vue'
import diaLog from '@/components/Dialog/index.vue'
import { getzbjg } from '@/api/zbjg.js'
export default {
  name: 'UserManagement',
  components: {
    yxtTable,
    diaLog
  },
  data() {
    const generateData = _ => {
      const data = []
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        })
      })
      return data
    }
    return {
      getzbjg,
      data: generateData(),
      valueList: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1
      },
      renderFunc(h, option) {
        return <span>{ option.key } - { option.label }</span>
      },
      // ==============
      form: {
        value: ''
      },
      tableColumn: [
        { prop: 'ZBFWF_ZBBH', label: '登录名称' },
        { prop: 'ZBFWF_ZBDW', label: '用户名称' },
        { prop: 'ZBFWF_ZBFJSFS', label: '部门' },
        { prop: 'ZBFWF_ZBFJSFS', label: '联系方式' },
        { prop: 'ZBFWF_ZBFJSFS', label: '邮箱' },
        { prop: 'ZBFWF_ZBFJSFS', label: '账号类型' },
        { prop: 'ZBFWF_ZBFJSFS', label: '创建日期' },
        { prop: 'ZBFWF_ZBFJSFS', label: '账号状态', dictCode: 'status' }
      ],
      // 表格属性
      tableConfig: {
        stripe: 'stripe',
        border: 'border',
        height: '140',
        maxHeight: '140',
        showHeader: true,
        highlightCurrentRow: true
      },
      otherConfig: {
        list: 'list'
      },
      // 操作按钮
      setupConfig: {
        fixed: 'right',
        width: 200,
        edit: true,
        stop: true,
        del: true
      },
      dict: {
        status: [
          { code: 0, name: '启用' },
          { code: 1, name: '停用' },
          { code: 2, name: '不启用也不停用' }
        ]
      },
      searchConfig: [
        { type: 'input', key: 'name', placeholder: '请输入登录名称' },
        { type: 'input', key: 'code', placeholder: '请输入用户名' },
        {
          type: 'select',
          key: 'status',
          selectList: [
            { code: 0, name: '打卡失败' },
            { code: 1, name: '打卡成功' }
          ],
          listLabel: 'name',
          listValue: 'code',
          placeholder: '请选择部门'
        },
        {
          type: 'select',
          key: 'status',
          selectList: [
            { code: 0, name: '打卡失败' },
            { code: 1, name: '打卡成功' }
          ],
          listLabel: 'name',
          listValue: 'code',
          placeholder: '请选择账号状态'
        },
        {
          type: 'select',
          key: 'status',
          selectList: [
            { code: 0, name: '打卡失败' },
            { code: 1, name: '打卡成功' }
          ],
          listLabel: 'name',
          listValue: 'code',
          placeholder: '请选择账号类型'
        }
      ],
      searchReset: {
        zbfwfZbbh: '',
        zbfwfFbbh: '',
        zbfwfZbdw: '',
        zbfwfFkrqFrom: '',
        zbfwfFkrqTo: '',
        zbfwfXmdw: '',
        pageNumber: 1,
        pageSize: 20
      },
      modalVisible: false, // 弹窗
      title: '新增用户'
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    },
    // ===========================
    // 关闭弹窗
    closeDialog() {
      this.modalVisible = false
    },
    handleDelete(row) {
      console.log(row, '删除')
    },
    handleAdd(selectionData) {
      this.title = '新增用户'
      this.modalVisible = true
      console.log('新增', selectionData)
    },
    handleClickExport(data) {
      console.log(data)
    },
    stop(row) {
      console.log('停用', row)
    },
    edit(row) {
      this.title = '编辑用户'
      this.modalVisible = true
      console.log('编辑', row)
    }
  }
}
</script>
  <style scoped lang="scss">
.el-icon-circle-check {
  font-size: 28px;
  color: #67c23a;
}
.el-icon-circle-close {
  font-size: 28px;
  color: #f00;
}
.informationContainer{
  width: 100%;
  height: 20vh;
}
.roleContainer{
  width: 100%;
  height: 35vh;
  margin-top: 10px;
}
.sjtj{
  border-left: 4px solid #1890ff;
  padding: 0 0 0px 10px;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  }
</style>
